<template>
  <div class="appendMilitary">
    <div v-for="(item,index) in appendData" :key="index" class="item">
      <div class="itemName"><div v-if="item.must" style="color: red">*</div>{{item.name}}：</div>
      <div v-if="item.type === 'input'">
        <a-input v-model="item.val" :placeholder="item.place" />
      </div>
      <div v-if="item.type === 'area'">
        <a-textarea style="height: 180px" v-model="item.val" :placeholder="item.place" />
      </div>
    </div>
  </div>
</template>
<script>
  import {appendMilitary} from "./index";
  export default {
    name:'appendMilitary',
    props:{
      appendData: Array
    },
    methods:{
      selectChange(index,idx){
        this.appendData[index].val = idx;
      },
      filterOption(input, option) {
        return (option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0);
      },
      sendData(){
        let configData = {};
        for(let i=0;i<appendMilitary.length;i++){
          if(appendMilitary[i].must && !appendMilitary[i].val) return this.$message.info(appendMilitary[i].place);
          configData[appendMilitary[i].key] = appendMilitary[i].val
        }
        this.$emit('sendData',configData);
      }
    }
  }
</script>
<style lang="less" scoped>
  .appendMilitary{
    display: flex;
    flex-wrap: wrap;
    .item{
      width: 100%;
      display: flex;
      margin-bottom: 16px;
      div{
        .ant-input{
          width: 200px;
        }
      }
      .itemName{
        display: flex;
        height: 32px;
        align-items: center;
        white-space: nowrap;
        width: 100px;
        justify-content: flex-end;
      }
    }
  }
</style>
